<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="icon" href="./favicon.ico">
        <script src="./js/vue-2.6.1.js" type="text/javascript"></script>
        <script src="./js/jquery-1.11.1.js" type="text/javascript"></script>
        <!-- <script src="./js/smooth-scroll.min.js" type="text/javascript"></script> -->
        <title>demo</title>
        <style>
            .aa {
                height: 1000px;
            }
        </style>
    </head>

    <body>
        <div style="position: fixed;width: 100px;">
            <a data-scroll href="#a1" class="cc" id="ccc">a1</a>
            <a data-scroll href="#a2" id="ii" class="cc">a2</a>
            <a data-scroll href="#a3" class="cc">a3</a>
        </div>
        <div id="a1" class="aa">a1</div>
        <div id="a2" class="aa">a2</div>
        <div id="a3" class="aa">a3</div>

        <script>
            // $(window).bind('hashchange', function(e) {
            //     let target = location.hash.substring(1);

            //     smoothScroll({ scrollTarget: '#' + target });
            // });
            // console.log('smoothScroll', smoothScroll);
            // smoothScroll.init({
            //     speed: 5000, // Integer. How fast to complete the scroll in milliseconds
            //     easing: 'easeInOutCubic', // Easing pattern to use
            //     offset: 20, // Integer. How far to offset the scrolling anchor location in pixels
            // });

            $(window).bind('hashchange', (e) => {
                e.preventDefault();
                e.stopPropagation();
            });

            $('#ii').bind('click', (e) => {
                e.preventDefault();
                location.hash = 'a3';
            });
        </script>
    </body>

</html>